<template>
  <Drawer v-model:visible="visible" :destroyOnClose="true" class="custom-class" placement="right" title="" width="40%">
    <Divider>基本信息</Divider>
    <div class="md:my-15">
      <GovernBasicForm ref="basicRef" @change="changeHandler" @error="errorHandler"
                       @submit="addPrimaryParam" @success="perimarySuccessHandler"/>
    </div>

    <Divider>策略信息</Divider>

    <div v-if="governType === '1'" class="md:my-15">
      <GovernRetryForm ref="retryRef" @submit="addParam" @success="successHandler"/>
    </div>
    <div v-if="governType === '2'" class="md:my-15">
      <GovernRateLimitForm ref="rateLimitRef" @submit="addParam" @success="successHandler"/>
    </div>
    <div v-if="governType === '3'" class="md:my-15">
      <GovernBulkheadForm ref="bulkheadRef" @submit="addParam" @success="successHandler"/>
    </div>
    <div v-if="governType === '4'" class="md:my-15">
      <GovernCircuitBreakerForm ref="circuitBreakerRef" @submit="addParam" @success="successHandler"/>
    </div>
    <div class="absolute bottom-10 right-8">
      <Button style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</Button>
      <Button style="font-weight: bolder" type="primary" @click="submitHandler">确定</Button>
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
/* eslint-disable */
import {Button, Divider, Drawer} from 'ant-design-vue';
import {ref, watch} from 'vue';
import GovernBasicForm from '/@/views/maintenance-center/microservice-govern/components/governBasicForm.vue';
import GovernRateLimitForm from '/@/views/maintenance-center/microservice-govern/components/governRateLimitForm.vue';
import GovernRetryForm from '/@/views/maintenance-center/microservice-govern/components/governRetryForm.vue';
import GovernBulkheadForm from '/@/views/maintenance-center/microservice-govern/components/governBulkheadForm.vue';
import GovernCircuitBreakerForm
  from '/@/views/maintenance-center/microservice-govern/components/governCircuitBreakerForm.vue';
import {
  createGovernance,
  editGovernance,
  viewGovernance
} from '/@/api/maintenance-center/microservice-govern/governance/governance';
import {
  CreateGovernancePageParam,
  GovernanceDetailItem
} from '/@/api/maintenance-center/microservice-govern/governance/model/governanceModel';

const emits = defineEmits(['getGovernance'])
const visible = ref<boolean>(false);
let params: CreateGovernancePageParam = {};
const flag = ref(false);
const perimaryFlag = ref(false);
const title = ref('新建治理策略');
const details = ref();
const governType = ref('0');
const showDrawer = async (params?: Recordable) => {
  governType.value = 0;
  flag.value = false;
  perimaryFlag.value = false;
  visible.value = true;
  if (params === undefined) {
    title.value = '新建治理策略';
  } else {
    title.value = '编辑治理策略';
    details.value = await viewGovernance({strategyId: params.id});
    await setFormData(details.value);
  }
};

const onClose = async () => {
  visible.value = false;
};
const basicRef = ref();
const retryRef = ref();
const rateLimitRef = ref();
const bulkheadRef = ref();
const circuitBreakerRef = ref();

function changeHandler(record: string) {
  console.log(record);
  if (record === 'retry') {
    governType.value = '1';
  } else if (record === 'rateLimiting') {
    governType.value = '2';
  } else if (record === 'bulkhead') {
    governType.value = '3';
  } else if (record === 'circuitBreaker') {
    governType.value = '4';
  }
}

async function perimarySuccessHandler() {
  perimaryFlag.value = true;
}

async function successHandler() {
  flag.value = true;
}

async function errorHandler() {
  flag.value = false;
}

async function addPrimaryParam(record: Recordable) {
  params = Object.assign(params, record);
}

async function addParam(record: Recordable) {
  if (governType.value === '1') {
    params.retryParams = record;
  } else if (governType.value === '2') {
    params.rateLimitingParams = record;
  } else if (governType.value === '3') {
    params.bulkheadParams = record;
  } else if (governType.value === '4') {
    params.circuitBreakerParams = record;
  }
}

async function setFormData(fieldsValue: GovernanceDetailItem) {
  basicRef.value.setData({
    id: fieldsValue.id,
    strategyMethod: fieldsValue.strategyMethod,
    strategyName: fieldsValue.strategyName,
    scenarioId: fieldsValue.scenarioId,
  });
  await changeHandler(fieldsValue.strategyMethod);
  if (governType.value === '1') {
    retryRef.value.setData(fieldsValue.retryParams);
  } else if (governType.value === '2') {
    rateLimitRef.value.setData(fieldsValue.rateLimitingParams);
  } else if (governType.value === '3') {
    bulkheadRef.value.setData(fieldsValue.bulkheadParams);
  } else if (governType.value === '4') {
    circuitBreakerRef.value.setData(fieldsValue.bulkheadParams);
  }
}

async function submitHandler() {
  await basicRef.value.submitHandler();
  if (governType.value === '1') {
    await retryRef.value.submitHandler();
  } else if (governType.value === '2') {
    await rateLimitRef.value.submitHandler();
  } else if (governType.value === '3') {
    await bulkheadRef.value.submitHandler();
  } else if (governType.value === '4') {
    await circuitBreakerRef.value.submitHandler();
  }
}

async function submit() {
  params.isEnabled = true
  if (title.value === '编辑治理策略') {
    await editGovernance(params).then(() => {
      emits('getGovernance');
    })
  } else {
    createGovernance(params).then(() => {
      emits('getGovernance');
    });
  }
  onClose();
}

watch(
    () => flag.value,
    () => {
      if (flag.value === true && perimaryFlag.value === true) {
        submit();
        params = {};
        flag.value = false;
        perimaryFlag.value = false;
      }
    }
);
defineExpose({showDrawer});
</script>
